<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta charset="utf-8" />
  <title> 对图片进行加密 </title>
  
  
 </head>

 <body>   
 
 
	<div align="center">
 
    <div id='main' class='section dark'>
        <h1><div class='step'>一、请选择一张图片进行加密或者解密：</div></h1>
		<div class='sectionbody'>
        <input type='file' id='file' value="上传图片"/>
        </div>
		<img id='preview' class='preview hide' width="200"/>
		
		
		</br></br></br></br></br></br>
    </div>
	<h1>二、加密或解密</h1>
	<h2>加密</h2>
	<h3>文本加密</h3>
	<input id='message' class='message'  placeholder='请输入要加密的内容' onchange="document.getElementById('bb').innerHTML=this.value.length" height="60px"
			style="height:40px;width:600px;">
	
	
	<button id='encode' class='submit'>加密文本</button> </br></br>
	
	
	<h3>图片加密</h3>
	<input type='file' id='file2' />
	<button id='encode2' class='submit'>加密图片</button> 
	
	
	
    
			
			
			
			
               
					
                
				
				<hr />
				<hr />
				<hr />
				<hr />
				<hr />

			<h2>解密</h2>
			<h3>文本解密</h3>	
				<input id='message2' class='message'  placeholder='请输入要解密的内容' onchange="document.getElementById('tt').innerHTML=this.value.length" height="60px"
			style="height:40px;width:600px;">
				<button id='decode' class='submit'>解密文本</button></br>
				
				
				<br><br><br>
			<h3>图片解密</h3>
				
                <button id='decode2' class='submit'>解密图片</button>
				
				
				
				<label><input type="checkbox" id="debug" />调试模式</label>
				
			

		<h1>三、下载加密或解密后的图片</h1>
			
		<div id="files"></div>
    <canvas id='canvas' style="display:none;"></canvas>
    <img id='output' width="200"/>



		</div>
  <script type="text/javascript" src="imagemask.js"></script>
  <script type="text/javascript">
var mask = new ImageMask({debug: false});
  window.onload = function() {
    // add action to the file input
    var input = document.getElementById('file');
    input.addEventListener('change', importImage);
    // add action to the encode button
    var encodeButton = document.getElementById('encode');
    encodeButton.addEventListener('click', encode);
    // add action to the decode button
    var decodeButton = document.getElementById('decode');
    decodeButton.addEventListener('click', decode);
    // add action to the encode button
    var encodeButton2 = document.getElementById('encode2');
    encodeButton2.addEventListener('click', encode2);
    // add action to the decode button
    var decodeButton2 = document.getElementById('decode2');
    decodeButton2.addEventListener('click', decode2);
};
// put image in the canvas and display it
var importImage = function(e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        // set the preview
        document.getElementById('preview').style.display = 'block';
        document.getElementById('preview').src = event.target.result;
        // wipe all the fields clean
        document.getElementById('message').value = '';
        document.getElementById('output').src = '';
        // read the data into the canvas element
        var img = new Image();
        img.onload = function() {
			var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.canvas.width = img.width;
            ctx.canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            
			var count = mask.maxTextLength(canvas);
			document.getElementById('aa').innerHTML = 'the hidden text max length: ' + count + ' || the hidden file max size: ' + (mask.maxFileSize(canvas)/1024).toFixed(2) + 'KB';
            //decode();
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
};
// encode the image and save it
var encode = function() {
    var message = document.getElementById('message').value;
    var output = document.getElementById('output');
    var canvas = document.getElementById('canvas');
	var debug = document.getElementById('debug');
	var preview = document.getElementById('preview');
	var ctx = canvas.getContext('2d');
	ctx.drawImage(preview, 0, 0, preview.width, preview.height);
	mask.opts.debug = debug.checked;
	mask.hideText(canvas, message);
    output.src = canvas.toDataURL();
};
// decode the image and display the contents if there is anything
var decode = function() {
    // decode the message with the supplied password
    var canvas = document.getElementById('canvas');
    var message = mask.revealText(canvas);
     document.getElementById('message2').value = message;
};
// encode the image and save it
var encode2 = function() {
    var output = document.getElementById('output');
    var canvas = document.getElementById('canvas');
    var input = document.getElementById('file2');
	var debug = document.getElementById('debug');
	var preview = document.getElementById('preview');
	var ctx = canvas.getContext('2d');
	ctx.drawImage(preview, 0, 0, preview.width, preview.height);
	mask.opts.debug = debug.checked;
	mask.hideFile(canvas, input.files[0], function(result){
		if(result.success){
			output.src = canvas.toDataURL();
		}else{
			alert(result.message);
		}
	});
};
function createFileBlob (data, name) {
  const file = new window.Blob([data], { type: "application/octet-binary" })
  const fileUrl = window.URL.createObjectURL(file)
  const files = document.getElementById('files')
  const link = document.createElement('a')
  link.setAttribute('href', fileUrl)
  link.setAttribute('download', name)
  link.innerText = name + ' - Size: ' + file.size
  files.appendChild(link);
}
// decode the image and display the file if there is anything
var decode2 = function() {
    // decode the message with the supplied password
    var canvas = document.getElementById('canvas');
    var file = mask.revealFile(canvas);
	createFileBlob(file.data, file.name);
};
  </script>
 </body>
</html>